'use strict';
window.onload = main;


/* GLOBAL VARIABLES */

var editor = null;
var currentDirectory = '/home/pcm-seven';
var currentFile = '';


/* GLOBAL FUNCTIONS */

function putFile(e){
   var xhr = new XMLHttpRequest();
   xhr.open('PUT', currentFile);
   xhr.setRequestHeader('ajax-request', 'true');
   xhr.onreadystatechange = function(){
      if (xhr.readyState !== 4) return;
      if (xhr.status === 200) alert('Saved successfully!');
      else alert('For some reason, saving was not successful. Please try again.');
   };
   xhr.send(editor.getValue());
}

function getParentDirectory(e){
   var xhr = new XMLHttpRequest();
   xhr.open('GET', currentDirectory.replace(/\/[^\/]+$/, ''));
   xhr.setRequestHeader('ajax-request', 'true');
   xhr.onreadystatechange = function(){insertIntoDom(xhr);};
   xhr.send();
}

function getFileOrDirectory(e){
   var xhr = new XMLHttpRequest();
   xhr.open('GET', currentDirectory + '/' + e.currentTarget.textContent.trim());
   xhr.setRequestHeader('ajax-request', 'true');
   xhr.onreadystatechange = function(){insertIntoDom(xhr);};
   xhr.send();
}

function insertIntoDom(xhr){
   if (xhr.readyState !== 4 || xhr.status !== 200) return;
   if (xhr.getResponseHeader('resource-type') === 'file') insertFile(xhr);
   if (xhr.getResponseHeader('resource-type') === 'directory') insertDirectory(xhr);
}

function insertFile(xhr){
   currentFile = xhr.getResponseHeader('full-path');
   document.getElementById('file').innerHTML = currentFile;
   editor.setValue(xhr.responseText);
   editor.markClean();
   if (currentFile.search(/js$/) !== -1) editor.setOption('mode', 'javascript');
   if (currentFile.search(/html$/) !== -1) editor.setOption('mode', 'htmlmixed');
   if (currentFile.search(/css$/) !== -1) editor.setOption('mode', 'css');
}

function insertDirectory(xhr){
   currentDirectory = xhr.getResponseHeader('full-path');
   document.getElementById('path').lastChild.textContent = ' ' + currentDirectory;

   var data = JSON.parse(xhr.responseText);
   var template1 = document.getElementById('directory-template').innerHTML;
   var html1 = Mustache.render(template1, data);
   document.getElementById('directories').innerHTML = html1;
   var template2 = document.getElementById('file-template').innerHTML;
   var html2 = Mustache.render(template2, data);
   document.getElementById('files').innerHTML = html2;

   var directories = document.getElementById('directories').childNodes;
   for (var i = 0; i < directories.length; i++) directories[i].addEventListener('click', getFileOrDirectory);
   var files = document.getElementById('files').childNodes;
   for (var i = 0; i < files.length; i++) files[i].addEventListener('click', getFileOrDirectory);
}


/* THIS IS WHERE EXECUTION STARTS */

function main(){
   // get info about home directory
   var xhr = new XMLHttpRequest();
   xhr.open('GET', currentDirectory);
   xhr.setRequestHeader('ajax-request', 'true');
   xhr.onreadystatechange = function() { insertIntoDom(xhr); };
   xhr.send();

   // setup click handlers
   document.getElementById('back-button').addEventListener('click', getParentDirectory);
   document.getElementById('save').addEventListener('click', putFile);

   // instantiate editor
   var editorConfig = {
     tabSize: 3,
     mode: ''
   }
   editor = new CodeMirror(document.getElementById('editor'), editorConfig);
   editor.on('cursorActivity', function() {
      var cur = editor.getCursor();
      var template = document.getElementById('position-template').innerHTML;
      var html = Mustache.render(template, cur);
      document.getElementById('position').innerHTML = html;
   });
}
